<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      ref="dwMenuGroupRef"
      :columns="columns"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :edit-form-title-field="nameField"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label">IP地址</td>
              <td>
                <el-form-item
                  prop="ipAddress"
                  :rules="[
                    {
                      required: true,
                      message: '请输入IP地址',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.ipAddress" placeholder="请输入IP地址"></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label">端口号</td>
              <td>
                <el-form-item prop="hostPort">
                  <el-input-number v-model="formData.hostPort"></el-input-number>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">操作系统</td>
              <td></td>
              <td class="dw-td-label">登录方式</td>
              <td>
                <el-radio-group v-model="formData.loginType">
                  <el-radio :label="1">密码</el-radio>
                  <el-radio :label="2">凭证</el-radio>
                </el-radio-group>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">登录账号</td>
              <td>
                <el-form-item
                  prop="user"
                  :rules="[
                    {
                      required: true,
                      message: '请输入登录账号',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.user" placeholder="请输入登录账号"></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label">{{ formData.loginType === 1 ? '密码' : '凭证' }}</td>
              <td></td>
            </tr>
            <tr>
              <td class="dw-td-label">标签</td>
              <td :colspan="3"></td>
            </tr>
            <tr>
              <td class="dw-td-label">主机说明</td>
              <td :colspan="3">
                <el-form-item prop="hostMemo">
                  <el-input v-model="formData.hostMemo" maxlength="250" placeholder="请输入主机信息..." show-word-limit type="textarea" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">排序</td>
              <td :colspan="3">
                <el-form-item prop="sortNo">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig, IAddInfoHttpConfig, IHttpConfig, IGetInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IHostMachine } from './host-machine';

defineOptions({
  name: 'AssetsHostMachine',
});
const formData = ref<IHostMachine>({
  id: '',
  ipAddress: '',
  hostPort: 22,
  user: 'root',
  password: '',
  osTypeCode: '',
  loginType: 1,
  hostStatus: 1,
  hostMemo: '',
  sortNo: 1,
});
const dataGridTitle = '主机资产列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IHostMachine): string => {
  if (stateValue === 'add') {
    return '主机资产信息';
  } else {
    return data.ipAddress;
  }
};
const nameField = 'hostMachineName';
const columns = ref<IColumn[]>([
  {
    prop: 'ipAddress',
    label: 'IP地址',
    width: 280,
    align: 'left',
  },
  {
    prop: 'user',
    label: '用户',
    width: 280,
  },
  {
    prop: 'hostMemo',
    label: '说明',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/assets/host/machine/#{id}',
  delInfoMsgEmphasize: '#{ipAddress}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/assets/host/machine/list',
};
const getPageHttpConfig: IGetPageHttpConfig<IHostMachine> = {
  url: '/admin-api/assets/host/machine/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IHostMachine> = {
  url: '/admin-api/assets/host/machine/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IHostMachine> = {
  url: '/admin-api/assets/host/machine',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IHostMachine> = {
  url: '/admin-api/assets/host/machine',
};
</script>
<style lang="scss" scoped></style>
